import React, { useContext, memo, useMemo } from 'react';
import { DatePicker, Form, InputNumber, message } from 'antd';
import moment from 'moment';

import OrganizationSelect from '@/components/OrganizationSelect';

import SalaryPageProvider from '@/pages/SalaryManage/components/SalaryPageWrapper/SalaryPageProvider';
import Search from '@/pages/SalaryManage/components/SuperSearch';
import TwoColHead from '@/pages/SalaryManage/components/TwoColHead';
import CheckHandle from '@/pages/SalaryManage/SalaryCalculate/Recheck/components/CheckHandle';

import { isSingapore } from '@/pages/SalaryManage/utils';

import styles from './index.less';

const { MonthPicker } = DatePicker;

//  搜索栏
const SearchWrapper = memo(({ form, checkButtonList, actionType }) => {
    const { getFieldDecorator } = form;

    const salaryProvider = useContext(SalaryPageProvider);
    const { period, organizationCode, searchModel, organizationTreeData, changeSalaryProviderParam } = salaryProvider;

    //  月份切换事件
    const onChange = (date, dateString) => {
        changeSalaryProviderParam({
            period: dateString
        });
    };

    //  搜索按钮事件
    const searchHandle = () => {
        if (!organizationCode) {
            message.error('请选择行政机构');
            return;
        }
        if (!period) {
            message.error('请选择薪资年月');
            return;
        }
        const {
            payAmtL = '',
            payAmtH = '',
            taxAmtL = '',
            taxAmtH = '',
            avgAmtL = '',
            avgAmtH = ''
        } = form.getFieldsValue();
        if (
            (payAmtL && (payAmtH || payAmtH === 0) && payAmtL > payAmtH) ||
            (taxAmtL && (taxAmtH || taxAmtH === 0) && taxAmtL > taxAmtH) ||
            (avgAmtL && (avgAmtH || avgAmtH === 0) && avgAmtL > avgAmtH)
        ) {
            message.error('薪资区间最小值不能大于最大值，请修改');
            return;
        }
        changeSalaryProviderParam({
            searchModel: {
                ...searchModel,
                ...form.getFieldsValue()
            }
        });
    };

    // 1.设置默认选择月份
    const periodMoment = period ? moment(period) : null;

    const {
        payAmtL = '',
        payAmtH = '',
        taxAmtL = '',
        taxAmtH = '',
        avgAmtL = '',
        avgAmtH = '',
        departmentCode
    } = searchModel;

    const maxVal = 1000000000;

    const onchangeInput = val => {
        if (val > maxVal) {
            return maxVal;
        }
        return val;
    };

    const handleOrgChange = val => {
        changeSalaryProviderParam({
            type: 'changeOrg',
            organizationCode: val
        });
    };

    const handleDepChange = val => {
        changeSalaryProviderParam({
            searchModel: {
                ...searchModel,
                departmentCode: val
            }
        });
    };

    const taxAmtText = useMemo(() => (isSingapore(organizationCode) ? '薪资总额' : '税前薪资'), [organizationCode]);

    return (
        <Search.Wrapper onSearch={searchHandle} className={styles.overview}>
            <TwoColHead
                rightStyle={{
                    justifyContent: 'flex-start'
                }}
                left={
                    <Search.Commonly>
                        <Search.Item label="机构">
                            <OrganizationSelect
                                isStrictly
                                allowClear={false}
                                isNeedPermission
                                style={{ width: 220 }}
                                value={organizationCode}
                                treeDataFromProp
                                treeDataList={organizationTreeData}
                                onChange={handleOrgChange}
                                unLoading
                            />
                        </Search.Item>
                        <Search.Item>
                            <OrganizationSelect
                                isStrictly
                                isFunctional
                                style={{ width: 150 }}
                                value={departmentCode}
                                onChange={handleDepChange}
                                extraQuery={{ auditStatus: 2 }}
                                unLoading
                            />
                        </Search.Item>
                        <Search.Item label="月份">
                            <MonthPicker
                                onChange={onChange}
                                value={periodMoment}
                                style={{
                                    width: '110px'
                                }}
                                allowClear={false}
                            />
                        </Search.Item>
                    </Search.Commonly>
                }
                right={<CheckHandle checkButtonList={checkButtonList} actionType={actionType} />}
            />
            <Search.More>
                <Search.Item label="实发薪资">
                    <Form.Item className={styles.intervalItem}>
                        {getFieldDecorator('payAmtL', {
                            initialValue: payAmtL,
                            getValueFromEvent: val => onchangeInput(val, 'payAmtL')
                        })(<InputNumber className={styles.intervalNum} />)}
                    </Form.Item>{' '}
                    ~{' '}
                    <Form.Item className={styles.intervalItem}>
                        {getFieldDecorator('payAmtH', {
                            initialValue: payAmtH,
                            getValueFromEvent: val => onchangeInput(val, 'payAmtH')
                        })(<InputNumber className={styles.intervalNum} min={0} />)}
                    </Form.Item>
                </Search.Item>
                <Search.Item label={taxAmtText}>
                    <Form.Item className={styles.intervalItem}>
                        {getFieldDecorator('taxAmtL', {
                            initialValue: taxAmtL,
                            getValueFromEvent: val => onchangeInput(val, 'taxAmtL')
                        })(<InputNumber className={styles.intervalNum} />)}
                    </Form.Item>{' '}
                    ~{' '}
                    <Form.Item className={styles.intervalItem}>
                        {getFieldDecorator('taxAmtH', {
                            initialValue: taxAmtH,
                            getValueFromEvent: val => onchangeInput(val, 'taxAmtH')
                        })(<InputNumber className={styles.intervalNum} min={0} />)}
                    </Form.Item>
                </Search.Item>
                <Search.Item label="平均薪资">
                    <Form.Item className={styles.intervalItem}>
                        {getFieldDecorator('avgAmtL', {
                            initialValue: avgAmtL,
                            getValueFromEvent: val => onchangeInput(val, 'avgAmtL')
                        })(<InputNumber className={styles.intervalNum} />)}
                    </Form.Item>{' '}
                    ~{' '}
                    <Form.Item className={styles.intervalItem}>
                        {getFieldDecorator('avgAmtH', {
                            initialValue: avgAmtH,
                            getValueFromEvent: val => onchangeInput(val, 'avgAmtH')
                        })(<InputNumber className={styles.intervalNum} min={0} />)}
                    </Form.Item>
                </Search.Item>
            </Search.More>
        </Search.Wrapper>
    );
});

export default memo(Form.create()(SearchWrapper));
